<!DOCTYPE html>
<html lang="zh" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="
  KaTeX
  
  #
  

KaTeX shortcode let you render math typesetting in markdown document. See KaTeX

Override KaTeX initialization config
To override the initialization config for KaTeX,
create a katex.json file in your assets folder!


  Example
  
  #
  




  Activation
  
  #
  

KaTeX is activated on the page by first use of the shortcode or render block. you can force activation with empty {{&lt; katex /&gt;}} and use delimiters defined in configuration in assets/katex.json.">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#343a40">
<meta name="color-scheme" content="light dark"><meta property="og:url" content="//localhost:1313/docs/shortcodes/KaTeX.html.html">
  <meta property="og:site_name" content="神马中转API">
  <meta property="og:title" content="KaTeX">
  <meta property="og:description" content="KaTeX # KaTeX shortcode let you render math typesetting in markdown document. See KaTeX
Override KaTeX initialization config
To override the initialization config for KaTeX, create a katex.json file in your assets folder!
Example # Activation # KaTeX is activated on the page by first use of the shortcode or render block. you can force activation with empty {{&lt; katex /&gt;}} and use delimiters defined in configuration in assets/katex.json.">
  <meta property="og:locale" content="zh">
  <meta property="og:type" content="article">
    <meta property="article:section" content="docs">
<title>KaTeX | 神马中转API</title>
<link rel="icon" href="/favicon.png" >
<link rel="manifest" href="/manifest.json">
<link rel="canonical" href="//localhost:1313/docs/shortcodes/KaTeX.html.html">
<link rel="stylesheet" href="/book.min.27cffe658670f57112663ed746a421db277c2dd6549965c27f9ad0103cccd990.css" integrity="sha256-J8/&#43;ZYZw9XESZj7XRqQh2yd8LdZUmWXCf5rQEDzM2ZA=" crossorigin="anonymous">
  <script defer src="/fuse.min.js"></script>
  <script defer src="/zh.search.min.0456d2ce9f5ecd0be1d3b1f7921be62a56e64fe7f4ce7b20a3423b88b24e924c.js" integrity="sha256-BFbSzp9ezQvh07H3khvmKlbmT&#43;f0znsgo0I7iLJOkkw=" crossorigin="anonymous"></script>

  <script defer src="/sw.min.6f6f90fcb8eb1c49ec389838e6b801d0de19430b8e516902f8d75c3c8bd98739.js" integrity="sha256-b2&#43;Q/LjrHEnsOJg45rgB0N4ZQwuOUWkC&#43;NdcPIvZhzk=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
  
</head>
<body dir="ltr" class="book-kind-page book-type-docs book-layout-">
  <input type="checkbox" class="hidden toggle" id="menu-control" />
  <input type="checkbox" class="hidden toggle" id="toc-control" />
  <main class="container flex">
    
<aside class="book-menu">
  <div class="book-menu-content">
    
  <nav>
<h2 class="book-brand">
  <a class="flex align-center" href="/index.html"><span>神马中转API</span>
  </a>
</h2>


<div class="book-search hidden">
  <input type="text" id="book-search-input" placeholder="搜索" aria-label="搜索" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>
<script>document.querySelector(".book-search").classList.remove("hidden")</script>















  
  <ul>
    
      
        <li class="book-section-flat" >
          
  
  

  
    <a href="/docs/example/index.html" class="">Example Site</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/table-of-contents/index.html" class="">Table of Contents</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/table-of-contents/With-ToC.html.html" class="">With ToC</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/example/table-of-contents/Without-ToC.html.html" class="">Without ToC</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-116a6035acc73224a51c969496c44370" class="toggle"  />
    <label for="section-116a6035acc73224a51c969496c44370" class="flex">
      <a role="button" class="flex-auto ">Collapsed</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/collapsed/3rd-level/index.html" class="">3rd Level</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/collapsed/3rd-level/.html.html" class="">4th Level</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-b781af25ad1a598c776fa6827868c0ce" class="toggle"  />
    <label for="section-b781af25ad1a598c776fa6827868c0ce" class="flex">
      <a role="button" class="flex-auto ">基本概念</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/aidocs/api.html.html" class="">基本概念-API地址（BaseURL）</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/aidocs/.html.html" class="">Base</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/aidocs/.html.html" class="">Group</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/aidocs/.html.html" class="">Key</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/aidocs/.html.html" class="">Pay1</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/aidocs/.html.html" class="">Pay2</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li class="book-section-flat" >
          
  
  

  
    <span>Shortcodes</span>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/.html.html" class="">Badges</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/.html.html" class="">Buttons</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/.html.html" class="">Cards</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/.html.html" class="">Columns</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/.html.html" class="">Details</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/.html.html" class="">Hints</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/.html.html" class="">Images</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/.html.html" class="">Mermaid</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/.html.html" class="">Steps</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/.html.html" class="">Tabs</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/KaTeX.html.html" class="active">KaTeX</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>










  
<ul>
  
  <li>
    
    <a href="/posts/index.html"  >
        Blog
      </a>
  </li>
  
</ul>






</nav>




  <script>(function(){var e=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>



  </div>
</aside>
 

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <h3>KaTeX</h3>

  <label for="toc-control">
    
    <img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
    
  </label>
</div>


  
  <aside class="hidden clearfix">
    
  
<nav id="TableOfContents">
  <ul>
    <li><a href="#katex">KaTeX</a></li>
    <li><a href="#example">Example</a>
      <ul>
        <li><a href="#activation">Activation</a></li>
        <li><a href="#rendering-as-block">Rendering as block</a></li>
        <li><a href="#rendering-inline">Rendering inline</a></li>
        <li><a href="#configuration">Configuration</a></li>
      </ul>
    </li>
  </ul>
</nav>



  </aside>
  
 
      </header>

      
      
  <article class="markdown book-article"><h1 id="katex">
  KaTeX
  
  <a class="anchor" href="#katex">#</a>
  
</h1>
<p>KaTeX shortcode let you render math typesetting in markdown document. See <a href="https://katex.org/">KaTeX</a></p>
<blockquote class="book-hint info">
<p><strong>Override KaTeX initialization config</strong><br>
To override the <a href="https://katex.org/docs/options.html">initialization config</a> for KaTeX,
create a <code>katex.json</code> file in your <code>assets</code> folder!</p>
</blockquote>
<h1 id="example">
  Example
  
  <a class="anchor" href="#example">#</a>
  
</h1>


<h2 id="activation">
  Activation
  
  <a class="anchor" href="#activation">#</a>
  
</h2>
<p>KaTeX is activated on the page by first use of the shortcode or render block. you can force activation with empty <code>{{&lt; katex /&gt;}}</code> and use delimiters defined in configuration in <code>assets/katex.json</code>.</p>
<h2 id="rendering-as-block">
  Rendering as block
  
  <a class="anchor" href="#rendering-as-block">#</a>
  
</h2>
<div class="book-columns flex flex-wrap">
<div class="flex-even markdown-inner" style="flex-grow: 1;">
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>{{&lt; katex display=true &gt;}}
</span></span><span style="display:flex;"><span>f(x) = <span style="color:#66d9ef">\int</span>_{-<span style="color:#66d9ef">\infty</span>}^<span style="color:#66d9ef">\infty\hat</span> f(<span style="color:#66d9ef">\xi</span>)<span style="color:#66d9ef">\,</span>e^{2 <span style="color:#66d9ef">\pi</span> i <span style="color:#66d9ef">\xi</span> x}<span style="color:#66d9ef">\,</span>d<span style="color:#66d9ef">\xi</span>
</span></span><span style="display:flex;"><span>{{&lt; /katex &gt;}}
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>```katex
</span></span><span style="display:flex;"><span>f(x) = <span style="color:#66d9ef">\int</span>_{-<span style="color:#66d9ef">\infty</span>}^<span style="color:#66d9ef">\infty\hat</span> f(<span style="color:#66d9ef">\xi</span>)<span style="color:#66d9ef">\,</span>e^{2 <span style="color:#66d9ef">\pi</span> i <span style="color:#66d9ef">\xi</span> x}<span style="color:#66d9ef">\,</span>d<span style="color:#66d9ef">\xi</span>
</span></span><span style="display:flex;"><span>```
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span><span style="color:#e6db74">$$</span>
</span></span><span style="display:flex;"><span>f<span style="color:#f92672">(</span>x<span style="color:#f92672">)</span> <span style="color:#f92672">=</span> \int_{<span style="color:#f92672">-</span>\infty}^\infty\hat f<span style="color:#f92672">(</span>\xi<span style="color:#f92672">)</span>\,e^{<span style="color:#ae81ff">2</span> \pi i \xi x}\,d\xi
</span></span><span style="display:flex;"><span><span style="color:#e6db74">$$</span>
</span></span></code></pre></div>  </div>
<div class="flex-even markdown-inner" style="flex-grow: 1;">
<link rel="stylesheet" href="/katex/katex.min.css" />
<script defer src="/katex/katex.min.js"></script>
  <script defer src="/katex/auto-render.min.js" onload="renderMathInElement(document.body, {
  &#34;delimiters&#34;: [
    {&#34;left&#34;: &#34;$$&#34;, &#34;right&#34;: &#34;$$&#34;, &#34;display&#34;: true},
    {&#34;left&#34;: &#34;\\(&#34;, &#34;right&#34;: &#34;\\)&#34;, &#34;display&#34;: false},
    {&#34;left&#34;: &#34;\\[&#34;, &#34;right&#34;: &#34;\\]&#34;, &#34;display&#34;: true}
  ]
});"></script>
<span>
  \[ 
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
 \]
  </span>
<hr>

<span>\[ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi \]</span>
<hr>
<p>$$
f(x) = \int_{-\infty}^\infty\hat f(\xi),e^{2 \pi i \xi x},d\xi
$$</p>
  </div>
</div>
<h2 id="rendering-inline">
  Rendering inline
  
  <a class="anchor" href="#rendering-inline">#</a>
  
</h2>
<p>When KaTeX is active on the page it is possible to write inline expressions.</p>
<table>
  <thead>
      <tr>
          <th>Code</th>
          <th>Output</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><code>{{&lt; katex &gt;}}\pi(x){{&lt; /katex &gt;}}</code></td>
          <td>
<span>
  \( \pi(x) \)
  </span>

</td>
      </tr>
      <tr>
          <td><code>\\( \pi(x) \\)</code></td>
          <td>\( \pi(x) \)</td>
      </tr>
  </tbody>
</table>
<h2 id="configuration">
  Configuration
  
  <a class="anchor" href="#configuration">#</a>
  
</h2>
<p>KaTeX configuration could be adjusted by editing <code>assets/katex.json</code> file. For example to enabled inline delimiters <code>$..$</code> put content below into the file.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&#34;delimiters&#34;</span>: [
</span></span><span style="display:flex;"><span>    {<span style="color:#f92672">&#34;left&#34;</span>: <span style="color:#e6db74">&#34;$$&#34;</span>, <span style="color:#f92672">&#34;right&#34;</span>: <span style="color:#e6db74">&#34;$$&#34;</span>, <span style="color:#f92672">&#34;display&#34;</span>: <span style="color:#66d9ef">true</span>},
</span></span><span style="display:flex;"><span>    {<span style="color:#f92672">&#34;left&#34;</span>: <span style="color:#e6db74">&#34;$&#34;</span>, <span style="color:#f92672">&#34;right&#34;</span>: <span style="color:#e6db74">&#34;$&#34;</span>, <span style="color:#f92672">&#34;display&#34;</span>: <span style="color:#66d9ef">false</span>},
</span></span><span style="display:flex;"><span>    {<span style="color:#f92672">&#34;left&#34;</span>: <span style="color:#e6db74">&#34;\\(&#34;</span>, <span style="color:#f92672">&#34;right&#34;</span>: <span style="color:#e6db74">&#34;\\)&#34;</span>, <span style="color:#f92672">&#34;display&#34;</span>: <span style="color:#66d9ef">false</span>},
</span></span><span style="display:flex;"><span>    {<span style="color:#f92672">&#34;left&#34;</span>: <span style="color:#e6db74">&#34;\\[&#34;</span>, <span style="color:#f92672">&#34;right&#34;</span>: <span style="color:#e6db74">&#34;\\]&#34;</span>, <span style="color:#f92672">&#34;display&#34;</span>: <span style="color:#66d9ef">true</span>}
</span></span><span style="display:flex;"><span>  ]
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div></article>
 
      

      <footer class="book-footer">
        
  <div class="flex flex-wrap justify-between">




<div>
  <a class="flex align-center" href="https://github.com/alex-shpak/hugo-book/edit/main/exampleSite/content/docs/shortcodes/katex.md" target="_blank" rel="noopener edit">
    <img src="/svg/edit.svg" class="book-icon" alt="" />
    <span>编辑本页</span>
  </a>
</div>


</div>





  
  
  
  <div class="flex flex-wrap justify-between">
    <span>
    
      <a href="/docs/shortcodes/.html.html" class="flex align-center book-icon">
        <img src="/svg/backward.svg" class="book-icon" alt="Previous" title="Tabs" />
        <span>Tabs</span>
      </a>
    
    </span>
    <span>
    
    </span>
  </div>
  




  <script>(function(){function e(e){const t=window.getSelection(),n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}document.querySelectorAll("pre code").forEach(t=>{t.addEventListener("click",function(){if(window.getSelection().toString())return;e(t.parentElement),navigator.clipboard&&navigator.clipboard.writeText(t.parentElement.textContent)})})})()</script>


 
        
      </footer>

      
  
  <div class="book-comments">

</div>
  
 
      <label for="menu-control" class="hidden book-menu-overlay"></label>
    </div>

    

<aside class="book-toc">
  <div class="book-toc-content">
    
  
<nav id="TableOfContents">
  <ul>
    <li><a href="#katex">KaTeX</a></li>
    <li><a href="#example">Example</a>
      <ul>
        <li><a href="#activation">Activation</a></li>
        <li><a href="#rendering-as-block">Rendering as block</a></li>
        <li><a href="#rendering-inline">Rendering inline</a></li>
        <li><a href="#configuration">Configuration</a></li>
      </ul>
    </li>
  </ul>
</nav>



  </div>
</aside>

 
  </main>

  
</body>
</html>
















